<template>
    <div class="app">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <coreL/>
                <div class="conres" v-if="shows==3">
                  <div class="ra" style="width: 270px;">我的积分>>会员权益及要求</div>
                    <div class="toxian">
                        <div class="toxian_one">会员等级要求</div>
                        <el-form label-width="140px" :label-position="labelPosition">
                            <el-form-item label="一级：">
                                <span>500分</span>
                            </el-form-item>
                            <el-form-item label="二级：">
                                <span>1000分</span>
                            </el-form-item>
                            <el-form-item label="三级：">
                                <span>2000分</span>
                            </el-form-item>
                            <el-form-item label="四级：">
                                <span>4000分</span>
                            </el-form-item>
                            <el-form-item label="五级：">
                                <span>8000分</span>
                            </el-form-item>
                            <el-form-item label="六级：">
                                <span>16000分</span>
                            </el-form-item>
                            <el-form-item label="七级：">
                                <span>32000分</span>
                            </el-form-item>
                            <el-form-item label="八级：">
                                <span>64000分</span>
                            </el-form-item>
                            <el-form-item label="体验达人一级：">
                                <span>128000</span>
                            </el-form-item>
                            <el-form-item label="体验达人二级：">
                                <span>256000分</span>
                            </el-form-item>
                            <el-form-item label="体验达人三级：">
                                <span>512000分</span>
                            </el-form-item>
                            <el-form-item label="体验官：">
                                <span>1000000分</span>
                            </el-form-item>
                        </el-form>
                        <div class="toxian_one">会员权益：</div>
                        <p class="toxian_PP">可0元参与免费抽奖</p>
                        <p class="toxian_PP">可免费参与价格竞猜活动</p>
                        <p class="toxian_PP">新品预定免邮</p>
                        <p class="toxian_PP">加入研讨会可获得打赏金</p>
                        <p class="toxian_PP">可邀请会员注册可获得积分</p>
                        <p class="toxian_PP">可使用积分兑换产品</p>
                        <el-button style="display:block;margin:0 auto" type="danger" @click="$router.go(-1)">返回</el-button>
                    </div>
                </div>

                <div class="conres" v-if="shows==2">
                  <div class="ra" style="width: 270px;">我的积分>>我的成长路径</div>
                    <div class="toxian">
                        <div class="lhdssg">我的成长路径</div>
                        <div class="toxian_two">
                            <p>2020年3月25日我成为了5级会员</p>
                            <p>2020年2月20日我成为了4级会员</p>
                            <p>2020年1月25日我成为了3级会员</p>
                            <p>2020年1月01日我成为了2级会员</p>
                            <p>2019年1月11日我成为了1级会员</p>
                        </div>
                        <el-button style="display:block;margin:0 auto" type="danger" @click="$router.go(-1)">返回</el-button>
                    </div>
                </div>

                <div class="conres" v-if="shows==1">
                  <div class="ra" style="width: 270px;">我的积分>>我的权益</div>
                    <div class="toxian">
                        <div class="lhdssg">我的权益</div>
                        <p class="srp">可0元参与免费体验活动</p>
                        <p class="srp">可免费参与价格竞猜活动</p>
                        <p class="srp">新品预定免邮</p>
                        <p class="srp">加入研讨会可获得打赏金</p>
                        <p class="srp">邀请会员注册可获得积分</p>
                        <p class="srp">可使用积分兑换产品</p>
                        <el-button style="display:block;margin:0 auto" type="danger" @click="$router.go(-1)">返回</el-button>
                    </div>
                </div>

                <div class="conres" v-if="shows==4">
                  <div class="ra" style="width: 330px;">我的积分>>如何快速上升会员等级</div>
                    <div class="toxian">
                        <div class="lhdssg">如何快速上升会员等级</div>
                        <p class="srp">参与平台活动均可获得相应积分，想要快速上升等级可多多参与平台活动</p>
                        <p class="srp" style="color: violet;">提醒：推荐新会员是获得积分的最快途径</p>
                        <div class="guizs">注册积累规则：</div>
                        <el-form label-width="180px" :label-position="labelPosition">
                            <el-form-item label="注册成功：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="推荐注册：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="注册成功：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="签到：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="连续签到：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="申请免费体验活动：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="申请成功：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="填写体检报告：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="试用报告加奖励：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="参与价格竞猜中奖活动：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="参与新品预定：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="支付尾款：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="分享活动：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="发帖：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="帖子上热推榜：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="参与评论：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="点赞：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="转发：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                            <el-form-item label="接受活动邀请：">
                                <span>{{nvbao}}</span>
                            </el-form-item>
                        </el-form>
                        <el-button style="display:block;margin:0 auto" type="danger" @click="$router.go(-1)">返回</el-button>
                    </div>
                </div>

              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreL from '@/components/coreL'
import coreF from '@/components/coreF'
export default {
    components: { 
    Header,
    Footer,
    coreL,
    coreF
    },
    data() {
      return {
          nvbao:"简柏格真皮百搭款女包",
          value1: null,
          labelPosition: 'right',
          shows:1,
      }
      
    },
    created(){
        this.shows=this.$route.query.id
    },
    methods: {
     
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.conres /deep/  .el-tabs__nav {margin-left: 260px}
.conres /deep/ .el-tabs__item.is-active {color: #f06048;}
.conres /deep/ .el-tabs__active-bar {color: #f06048;}
.conres /deep/ .el-tabs__item:hover {color: #f06048;}
.conres /deep/ .el-tabs__active-bar {background-color:#f06048 }
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.wlen_org {
  height: 40px;
  margin-right: 10px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 930px;
  border-radius: 6px;
  background-color: #fff
}

.conres .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  height: 43px;
  background-color: #f06048;
  box-shadow: 0px 4px 2px 0px 
		rgba(70, 23, 15, 0.38);
  border-radius: 0px 0px 20px 20px;
}
.toxian_one{
    margin-top: 30px;
    font-size: 20px;
    font-weight: 600;
    margin-left: 30px;
}
.el-rate {
  margin-top: 10px;
}
.el-form-item {
    margin-bottom: 0px;
}
.toxian_PP{
    text-indent: 140px;
}
.lhdssg{
    text-indent: 30px;
    margin-top: 30px;
    font-size: 20px;
    padding-bottom: 5px;
    border-bottom: solid 1px rgb(220,220,220);
}
.toxian_two{
    text-indent: 30px;
}
.toxian_two p{
    padding: 5px 0px;
}
.toxian_two p:nth-child(1){
    color: red;
}
.srp{
   padding: 5px 0px; 
   text-indent: 30px;
}
.guizs{
    background-color: rgb(239,96,73);
    width: 120px;
    padding: 5px 0px;
    text-align: center;
    color: white;
    margin-left: 96px;
    margin-top: 20px;
}
</style>